<template>
	<view>
		<view class="search-group">
			<view class="search-box">
				<input type="text" placeholder-class="placeholder-style" placeholder="输入关键词搜索" v-model="fromData.search_text" />
				<view class="del-btn" v-if="fromData.search_text" @click="clearSearch">
					<image src="@/static/images/delete.png" mode="widthFix" style="width: 40rpx;height: 40rpx;"></image>
				</view>
				<view class="search-btn" @click="search">
					<image src="@/static/images/search.png" mode="aspectFill"></image>
				</view>
			</view>
			<view style="padding:0 32rpx;" @tap="taps">
				<image src="@/pages/group/static/images/screen.png" mode="aspectFill" style="width: 50rpx;height: 50rpx;">
				</image>
			</view>
		</view>
		<uv-sticky bgColor="#fff">
			<uv-tabs :list="tabData" lineColor="#FE3052" keyName="name" :inactiveStyle="{'font-size':'32rpx'}" :activeStyle="{color:'#222222','font-size':'32rpx'}" @click="selectClick">
				<!-- <template v-slot:right>
					<view style="padding:0 32rpx;" @tap="taps">
						<image src="@/pages/group/static/images/screen.png" mode="widthFix" style="width: 40rpx;height: 40rpx;">
						</image>
					</view>
				</template> -->
			</uv-tabs>
		</uv-sticky>
		<hr-pull-load class="scroll-view" @refresh='refresh' @loadMore='loadMore' :height='scrollHeight' :pullHeight='pullHeight' :maxHeight='50' :lowerThreshold='20' :bottomTips='bottomTips' :isAllowPull="true" :isTab='false' ref='hrPullLoadRef'>
			<!-- 插入自己的数据-->
			<view style="padding: 0 30rpx 100rpx 30rpx">
				<ActiveList :list="activeList" ishome="home"></ActiveList>
			</view>
			<view style="margin-top: 100rpx;" v-if="activeList.length==0">
				<KongList title="暂无内容"></KongList>
			</view>
		</hr-pull-load>
		<!-- 筛选框 -->
		<uv-popup :round="20" ref="popup" mode="bottom">
			<view class="screen-popup">
				<view class="screen-header">
					<view class="title">
						高级筛选
					</view>
					<view class="del-img" @click="close">
						<!-- <image src="@/pages/group/static/images/screen.png" mode=""></image> -->
						x
					</view>
				</view>
				<view class="screen-item">
					<view class="item-title">
						活动时间
					</view>
					<view class="item-select">
						<view :class="[index==current ? 'select-btn':'no-select-btn']" v-for="(item,index) in timeList" :key="index" @click="clickchange(item,index)">
							{{item.name}}
						</view>
					</view>
				</view>
				<view class="screen-item">
					<view class="item-title">
						费用
					</view>
					<view class="item-select">
						<view :class="[index==current2 ? 'select-btn':'no-select-btn']" v-for="(item,index) in costList" :key="index" @click="costChange(item,index)">
							{{item.name}}
						</view>
					</view>
				</view>
				<view class="screen-item">
					<view class="item-title">
						距离
					</view>
					<view class="item-select">
						<view :class="[index==current3 ? 'select-btn':'no-select-btn']" v-for="(item,index) in distanceList" :key="index" @click="distanceChange(item,index)">
							{{item.name}}
						</view>
					</view>
				</view>
				<view class="footer-btns">
					<view class="reset-btn" @click="reset">
						重置
					</view>
					<view class="true-btn" @click="screen">
						确定
					</view>
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<script setup>
	import hrPullLoad from '@/components/hr-pull-load/hr-pull-load.vue';

	import {
		reactive,
		ref
	} from 'vue'
	import {
		onReady,
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		useUserStore
	} from '@/store/modules/user.js'
	import { nextTick } from '@vue/runtime-dom';
	const userstore = useUserStore()
	import {
		useActiveStore
	} from '@/store/modules/active.js'
	const activeStore = useActiveStore()
	import ActiveList from '@/components/ActiveList.vue';
	import KongList from '@/components/KongList.vue';
	const timeList = reactive([{
			name: '全部',
			day: 0
		},
		{
			name: '当天',
			day: 1,
		},
		{
			name: '3日内',
			day: 3
		},
		{
			name: '5日内',
			day: 5
		}
	])
	const costList = reactive([{
			name: '全部',
			min_cost: 0,
			max_cost: 0
		},
		{
			name: '￥50以下',
			min_cost: 0,
			max_cost: 50
		},
		{
			name: '￥50~100',
			min_cost: 50,
			max_cost: 100
		},
		{
			name: '￥100以上',
			min_cost: 100,
			max_cost: ''
		}
	])
	const distanceList = reactive([{
		name: '全部',
		min_distance: 0,
		max_distance: 0
	}, {
		name: '3公里以内',
		min_distance: 0,
		max_distance: 3
	}, {
		name: '5~10公里',
		min_distance: 5,
		max_distance: 10
	}, {
		name: '10公里以上',
		min_distance: 10,
		max_distance: ''
	}])
	const current = ref(0)
	const current2 = ref(0)
	const current3 = ref(0)
	const popup = ref()
	const fromData = reactive({
		lat: '',
		lng: '',
		type: '0',
		day: '0',
		min_cost: '0',
		max_cost: '0',
		min_distance: '0',
		max_distance: '0',
		search_text: '',
		page: 1,
		city_id: ''
	})
	const loadStatus = ref('loadmore')
	const activeList = ref([])
	const tabData = ref([])
	const scrollHeight = ref(0)
	const pullHeight = ref(20)
	const hrPullLoadRef = ref()
	const taps = () => {
		popup.value.open();
	}
	const selectClick = (e) => {
		fromData.type = e.id
		fromData.page = 1
		activeList.value = []
		getHomeActivityList()
	}
	const close = () => {
		popup.value.close();
	}
	// 活动时间改变
	const clickchange = (item, index) => {
		current.value = index
		fromData.day = item.day
	}
	// 费用改变
	const costChange = (item, index) => {
		current2.value = index
		fromData.min_cost = item.min_cost
		fromData.max_cost = item.max_cost
	}
	// 距离改变
	const distanceChange = (item, index) => {
		current3.value = index
		fromData.min_distance = item.min_distance
		fromData.max_distance = item.max_distance
	}
	// 搜索
	const search = () => {
		fromData.page = 1
		activeList.value = []
		getHomeActivityList()
	}
	// 清空搜索
	const clearSearch = () => {
		fromData.page = 1
		activeList.value = []
		fromData.search_text = ''
		getHomeActivityList()
	}
	// 确定筛选
	const screen = () => {
		fromData.page = 1
		activeList.value = []
		getHomeActivityList()
		close()
	}
	// 重置
	const reset = () => {
		Object.assign(fromData, {
			lat: '',
			lng: '',
			type: '0',
			day: '0',
			min_cost: '0',
			max_cost: '0',
			min_distance: '0',
			max_distance: '0',
			search_text: '',
			page: 1,
			city_id: ''
		})
		current.value = 0
		current2.value = 0
		current3.value = 0
		fromData.page = 1
		activeList.value = []
		getHomeActivityList()
		close()
	}
	onReady(() => {
		nextTick(() => {
			uni.getSystemInfo({
				success: (res) => {
					const query = uni.createSelectorQuery().select('.scroll-view').boundingClientRect()
					query.exec((result) => {
						if (result && result.length) {
							scrollHeight.value = res.windowHeight - result[0].top + 'px'
						}
					})
				}
			})
		})
	})
	onLoad(() => {
		getHomeActivityList()
		getTabData()
	})
	const loadMore = () => {
		if (loadStatus.value == 'nomore') {
			return uni.$uv.toast('没有更多了~')
		}
		fromData.page++
		getHomeActivityList()
	}
	const refresh = () => {
		fromData.page = 1
		activeList.value = []
		getHomeActivityList()
		setTimeout(() => {
			hrPullLoadRef.value.reSet();
		}, 300);
	}
	// tab数据
	const getTabData = async () => {
		let res = await userstore.getConFig({
			type: 'userActivityTeamType'
		})
		if (res.code == 200) {
			tabData.value = res.data.content
			tabData.value.unshift({
				id: 0,
				name: '全部'
			})
		}
	}
	// 获取组局活动列表
	const getHomeActivityList = async () => {
		fromData.lat = uni.getStorageSync('latitude')
		fromData.lng = uni.getStorageSync('longitude')
		fromData.city_id = uni.getStorageSync('cityId')
		loadStatus.value = 'loading'
		let res = await activeStore.getHomeActivityList(fromData)
		if (res.code == 200 && res.data) {
			activeList.value = activeList.value.concat(res.data.data)
			// 判断是否还有数据
			if (res.data.current_page >= res.data.last_page) {
				loadStatus.value = 'nomore'
			} else {
				loadStatus.value = 'loadmore'
			}
		} else {
			loadStatus.value = 'nomore'
		}

	}
</script>
<style>
	page {
		background-color: #F6F6F6;
	}
</style>
<style lang="scss" scoped>
	.search-group {
		width: 100%;
		background-color: #fff;
		display: flex;
		align-items: center;
		 padding: 0 30rpx;
		.search-box {
			display: flex;
			align-items: center;
			border: 4rpx solid #222;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			padding: 8rpx;
			// margin-top: 30rpx;
			width: 640rpx;
			// margin: auto;

			input {
				flex: 1;
				margin-left: 36rpx;
				color: #999;
				font-size: 28rpx;
			}

			.del-btn {
				display: flex;
				align-items: center;
				margin: 0 20rpx;
				// background-color: red;
			}

			.search-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 96rpx;
				height: 64rpx;
				background: #222222;
				border-radius: 32rpx 32rpx 32rpx 32rpx;
				margin-left: 12rpx;

				image {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
	}

	.placeholder-style {
		color: #999;
		font-size: 28rpx;
	}

	// 筛选框
	.screen-popup {
		padding: 40rpx 30rpx;

		.screen-header {
			display: flex;
			// align-items: center;
			justify-content: center;

			.title {
				flex: 1;
				font-weight: bold;
				font-size: 32rpx;
				color: #222222;
				text-align: center;
			}

			.del-img {
				width: 32rpx;
				height: 32rpx;
				text-align: center;
				font-size: 36rpx;
				line-height: 1;
				margin-top: -12rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.screen-item {

			.item-title {
				font-weight: bold;
				font-size: 28rpx;
				color: #222222;
			}

			.item-select {
				display: flex;
				align-items: center;
				justify-content: flex-start;
				flex-wrap: wrap;
				width: 100%;
				margin: 30rpx 0 40rpx 0;

				.select-btn {
					width: calc((100% - 40rpx) / 4);
					min-width: calc((100% - 40rpx) / 4);
					max-width: calc((100% - 40rpx) / 4);
					height: 74rpx;
					line-height: 74rpx;
					background: #FE3052;
					border-radius: 38rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
					text-align: center;
					margin: 0 10rpx 10rpx 0;
				}

				.no-select-btn {
					width: calc((100% - 40rpx) / 4);
					min-width: calc((100% - 40rpx) / 4);
					max-width: calc((100% - 40rpx) / 4);
					height: 74rpx;
					line-height: 74rpx;
					background: #F6F6F6;
					border-radius: 38rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
					text-align: center;
					margin: 0 10rpx 10rpx 0;
				}

				.no-select-btn:nth-child(4n) {
					margin-right: 0;
				}

				.select-btn:nth-child(4n) {
					margin-right: 0;
				}
			}

		}

		.footer-btns {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.reset-btn {
				width: 200rpx;
				height: 100rpx;
				line-height: 100rpx;
				border-radius: 50rpx;
				border: 2rpx solid #D8D8D8;
				font-weight: 400;
				font-size: 28rpx;
				color: #666666;
				text-align: center;
			}

			.true-btn {
				width: 460rpx;
				height: 100rpx;
				line-height: 100rpx;
				background: #FE3052;
				border-radius: 50rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
				text-align: center;
			}
		}
	}
</style>